<!-- directive:title angular-drag-and-drop-lists -->
<!-- directive:breadcrumb angular-drag-and-drop-lists -->
<div class='panel-body'>
    <div class="advancedDemo row">
        <div ng-repeat="containers in model" class="col-md-6">
            <div class="dropzone box box-yellow">
                <ul dnd-list="containers"
                    dnd-allowed-types="['container']"
                    dnd-external-sources="true"
                    dnd-dragover="dragoverCallback(index, external, type, callback)"
                    dnd-drop="dropCallback(index, item, external, type)">
                    <li ng-repeat="container in containers"
                        dnd-draggable="container"
                        dnd-type="'container'"
                        dnd-effect-allowed="copyMove"
                        dnd-moved="containers.splice($index, 1)"
                        dnd-callback="container.items.length">
                        <div class="container-element box box-blue">
                            <h3>Container (effects allowed: {{container.effectAllowed}})</h3>
                            <ul dnd-list="container.items"
                                dnd-allowed-types="['item']"
                                dnd-horizontal-list="true"
                                dnd-external-sources="true"
                                dnd-effect-allowed="{{container.effectAllowed}}"
                                dnd-dragover="dragoverCallback(index, external, type)"
                                dnd-drop="dropCallback(index, item, external, type)"
                                dnd-inserted="logListEvent('inserted at', index, external, type)"
                                class="itemlist">
                                <li ng-repeat="item in container.items"
                                    dnd-draggable="item"
                                    dnd-type="'item'"
                                    dnd-effect-allowed="{{item.effectAllowed}}"
                                    dnd-dragstart="logEvent('Started to drag an item')"
                                    dnd-moved="container.items.splice($index, 1)"
                                    dnd-dragend="logEvent('Drag operation ended. Drop effect: ' + dropEffect)">
                                    {{item.label}}
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <style type="text/css">
        /***************************** Dropzone Styling *****************************/
        /** * The dnd-list should always have a min-height, * otherwise you can't drop to it once it's empty */
        .advancedDemo .dropzone ul[dnd-list] { min-height: 42px; margin: 0px; padding-left: 0px; }
        .advancedDemo .dropzone li { display: block; }
        /** * Reduce opacity of elements during the drag operation. This allows the user * to see where he is dropping his element, even if the element is huge. The * .dndDragging class is automatically set during the drag operation. */
        .advancedDemo .dropzone .dndDragging { opacity: 0.7; }
        /** * The dndDraggingSource class will be applied to the source element of a drag * operation. */
        .advancedDemo .dropzone .dndDraggingSource { opacity: 0.5; }
        /** * An element with .dndPlaceholder class will be added as child of the dnd-list * while the user is dragging over it. */
        .advancedDemo .dropzone .dndPlaceholder { background-color: #ddd !important; display: block; min-height: 42px; }
        /***************************** Element type specific styles *****************************/
        .advancedDemo .dropzone .itemlist { min-height: 120px !important; }
        .advancedDemo .dropzone .itemlist > li { background-color: #337ab7; border: none; border-radius: .25em; color: #fff; float: left; font-weight: 700; height: 50px; margin: 5px; padding: 3px; text-align: center; width: 80px; }
        .advancedDemo .dropzone .container-element { margin: 10px; }
    </style>
</div>

